<template>
  <div class="pop-up" v-show="echart_curve">
    <i class="el-icon-error" @click="handleClose()"></i>
    <div class="pop-up-back">
      <div ref="ref_curve" v-show="echart_curve" style="width: 100%; height: 580px"></div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
var barChartOptions = {
  title: {
    text: "",
    textStyle: {
      color: "#ffffff",
    },
  },
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
      // 提示框位置
      var x = 0; // x坐标位置
      var y = 0; // y坐标位置

      // 当前鼠标位置
      var pointX = point[0];
      var pointY = point[1];
      // 提示框大小
      var boxWidth = size.contentSize[0];
      var boxHeight = size.contentSize[1];

      // boxWidth > pointX 说明鼠标左边放不下提示框
      if (boxWidth > pointX) {
        x = 5;
      } else {
        // 左边放的下
        x = pointX - boxWidth;
      }

      // boxHeight > pointY 说明鼠标上边放不下提示框
      if (boxHeight > pointY) {
        y = 5;
      } else {
        // 上边放得下
        y = pointY - boxHeight;
      }
      return [x, y];
    },

    formatter: function (params) {
      var texts = "";
      for (var i = 0; i < params.length; i++) {
        texts +=
          "房间号：" +
          "<br>" +
          params[i].data.name +
          "<br>" +
          params[i].data.sumDate +
          "&nbsp;&nbsp;" +
          params[i].data.sumHour +
          ":00" +
          "&nbsp;&nbsp;&nbsp;总用电电量：" +
          params[i].data.value +
          "<br>";
      }
      return texts;
    },
  },
  legend: {
    data: [],
    textStyle: {
      color: "#ffffff",
    },
  },
  grid: {
    left: "3%",
    right: "1%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [100, 50, 30, 20, 90, 180],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    axisTick: {
      alignWithLabel: true,
    },
  },
  dataZoom: [
    {
      //默认为滚动条型数据区域缩放组件
      show: true,
      start: 60,
      end: 0,
    },
  ],
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  series: [],
};
export default {
  setup(props, conts) {
    const echart_curve = conts.attrs.echart_curve;
    const regionElectricity = conts.attrs.regionElectricity;
    // const timeList = conts.attrs.timeList;
    const echarts_name = conts.attrs.echarts_name;
    const ref_curve = ref();
    onMounted(async () => {
      // 初始化
      let barChart = echarts.init(ref_curve.value);
      // let regionElectricity = [
      //   {
      //     regionId: 100007962,
      //     regionName: "101",
      //     electricityHourlySums: [
      //       {
      //         electricityRecord: 12,
      //         key: "2022052210",
      //         sumDate: "2022-05-22",
      //         sumHour: 10,
      //       },
      //       {
      //         electricityRecord: 16,
      //         key: "2022052211",
      //         sumDate: "2022-05-22",
      //         sumHour: 11,
      //       },
      //       {
      //         electricityRecord: 13,
      //         key: "2022052211",
      //         sumDate: "2022-05-22",
      //         sumHour: 12,
      //       },
      //     ],
      //   },
      //   {
      //     regionId: 100007962,
      //     regionName: "102",
      //     electricityHourlySums: [
      //       {
      //         electricityRecord: 2,
      //         key: "2022052210",
      //         sumDate: "2022-05-22",
      //         sumHour: 10,
      //       },
      //       {
      //         electricityRecord: 7,
      //         key: "2022052211",
      //         sumDate: "2022-05-22",
      //         sumHour: 11,
      //       },
      //       {
      //         electricityRecord: 4,
      //         key: "2022052211",
      //         sumDate: "2022-05-22",
      //         sumHour: 12,
      //       },
      //     ],
      //   },
      // ];
      for (var i = 0; i < regionElectricity.length; i++) {
        console.log(regionElectricity[i]);
        let regionName = regionElectricity[i].regionName;
        barChartOptions.series.push({
          name: "",
          type: "line",
          stack: "Total",
          data: [],
          textStyle: {
            color: "#ffffff",
          },
        });
        for (
          var j = 0;
          j < regionElectricity[i].electricityHourlySums.length;
          j++
        ) {
          barChartOptions.series[i].data.push({
            name: regionElectricity[i].regionName,
            sumHour: regionElectricity[i].electricityHourlySums[j].sumHour,
            sumDate: regionElectricity[i].electricityHourlySums[j].sumDate,
            value:
              regionElectricity[i].electricityHourlySums[j].electricityRecord,
          });
        }
      }
      barChartOptions.xAxis.data.push(
        regionElectricity[0].electricityHourlySums[0].sumHour
      );
      console.log(barChartOptions.series);
      // barChartOptions.series[0].data = valueList;
      // barChartOptions.xAxis.data = timeList;
      barChartOptions.title.text = echarts_name;
      barChart.setOption(barChartOptions);
      window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        barChart.resize();
      };
    });
    const handleClose = () => {
      conts.emit("handleClose", false);
    };
    return {
      echarts_name,
      echart_curve,
      ref_curve,
      handleClose,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/device.less";
@import "../assets/css/common.css";

.pop-up {
  top: 0;
  background: rgba(112, 112, 112, 0.397);
}

.el-icon-error {
  color: #fff;
}
</style>
